<template>
  <div class="route-manage">
    <div class="page-header">
      <h1>旅游线路管理</h1>
      <el-button type="primary" @click="addRoute" :icon="Plus">
        添加线路
      </el-button>
    </div>

    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索线路名称..."
        :prefix-icon="Search"
        @input="searchRoutes"
        style="width: 300px"
      />
    </div>

    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column label="图片" width="100">
        <template #default="{ row }">
          <div class="route-image">
            <img 
              v-if="row.image" 
              :src="IMAGE_BASE_URL + row.image" 
              :alt="row.name"
              class="route-thumbnail"
              @error="handleImageError"
            />
            <el-icon v-else class="no-image-icon" size="40"><Picture /></el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="线路名称" width="180" />
      <el-table-column prop="description" label="描述" width="200">
        <template #default="{ row }">
          <el-tooltip :content="row.description" placement="top">
            <span>{{ truncateText(row.description, 40) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" width="100">
        <template #default="{ row }">
          <el-tag type="success">{{ row.duration || '未设置' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="theme" label="主题" width="120">
        <template #default="{ row }">
          <el-tag :type="getThemeColor(row.theme)">{{ row.theme || '未设置' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="100">
        <template #default="{ row }">
          <span style="color: #e74c3c; font-weight: bold;">
            {{ row.price ? `¥${row.price}` : '面议' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="行程安排" width="140">
        <template #default="{ row }">
          <el-button 
            type="primary" 
            size="small" 
            @click="showScheduleDialog(row)"
            :icon="Calendar"
          >
            查看行程 ({{ row.actualDays }}天)
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button size="small" @click="editRoute(row)" :icon="Edit">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteRoute(row.id)" :icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 行程详情对话框 -->
    <el-dialog
      v-model="showScheduleDetailDialog"
      :title="`${selectedRoute?.name} - 详细行程安排`"
      width="80%"
      top="5vh"
    >
      <div v-if="selectedRoute?.days && selectedRoute.days.length > 0" class="schedule-content">
        <!-- 线路图片 -->
        <div v-if="selectedRoute.image" class="route-image-section">
          <img 
            :src="IMAGE_BASE_URL + selectedRoute.image" 
            :alt="selectedRoute.name"
            class="route-detail-image"
            @error="handleImageError"
          />
        </div>
        
        <div class="route-info">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="线路主题">{{ selectedRoute.theme || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="游玩时长">{{ selectedRoute.duration || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="参考价格">{{ selectedRoute.price ? `¥${selectedRoute.price}` : '面议' }}</el-descriptions-item>
            <el-descriptions-item label="交通方式">{{ selectedRoute.transportation || '未设置' }}</el-descriptions-item>
            <el-descriptions-item label="适合人群">{{ selectedRoute.suitableFor || '未设置' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <el-divider>详细行程</el-divider>
        
        <el-timeline>
          <el-timeline-item
            v-for="day in selectedRoute.days"
            :key="day.dayNumber"
            :timestamp="`第${day.dayNumber}天`"
            placement="top"
          >
            <el-card>
              <template #header>
                <div class="day-header">
                  <el-icon><Calendar /></el-icon>
                  <span>第{{ day.dayNumber }}天行程</span>
                  <el-tag size="small" type="info">{{ day.activities?.length || 0 }}个活动</el-tag>
                </div>
              </template>
              <div class="activities">
                <div v-for="activity in day.activities" :key="activity.id" class="activity-item">
                  <div class="activity-header">
                    <el-tag 
                      :type="getTimeTypeColor(activity.timeType)" 
                      size="small"
                    >
                      {{ getTimeTypeLabel(activity.timeType) }}
                    </el-tag>
                    <el-tag type="info" size="small">{{ activity.time }}</el-tag>
                  </div>
                  <h4>{{ activity.title }}</h4>
                  <p>{{ activity.description }}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        
        <div v-if="selectedRoute.tips" class="tips-section">
          <el-divider>贴心提示</el-divider>
          <el-alert :title="selectedRoute.tips" type="info" :closable="false" show-icon />
        </div>
      </div>
      <div v-else class="no-schedule">
        <el-empty description="暂无行程安排" />
      </div>
    </el-dialog>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="showDialog"
      :title="isEditing ? '编辑线路' : '添加线路'"
      width="90%"
      @close="closeDialog"
    >
      <el-form :model="currentRoute" label-width="100px" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="线路名称" prop="name">
              <el-input v-model="currentRoute.name" placeholder="请输入线路名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="游玩时长" prop="duration">
              <el-select v-model="currentRoute.duration" placeholder="请选择时长">
                <el-option label="一日游" value="一日游" />
                <el-option label="三日游" value="三日游" />
                <el-option label="五日游" value="五日游" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="线路主题" prop="theme">
              <el-select v-model="currentRoute.theme" placeholder="请选择主题">
                <el-option label="历史文化" value="历史文化" />
                <el-option label="自然风光" value="自然风光" />
                <el-option label="美食体验" value="美食体验" />
                <el-option label="休闲度假" value="休闲度假" />
                <el-option label="探险户外" value="探险户外" />
                <el-option label="亲子游" value="亲子游" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参考价格">
              <el-input-number
                v-model="currentRoute.price"
                :min="0"
                :precision="2"
                :step="10"
                controls-position="right"
                placeholder="0"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="交通方式">
              <el-input v-model="currentRoute.transportation" placeholder="如：自驾、公交、步行" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="线路特点">
              <el-input v-model="currentRoute.features" placeholder="线路的特色和亮点" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="线路描述" prop="description">
          <el-input
            v-model="currentRoute.description"
            type="textarea"
            :rows="3"
            placeholder="请输入线路描述"
          />
        </el-form-item>
        
        <el-form-item label="适合人群">
          <el-input v-model="currentRoute.suitableFor" placeholder="如：亲子家庭、年轻人、老年人" />
        </el-form-item>
        
        <el-form-item label="贴心提示">
          <el-input
            v-model="currentRoute.tips"
            type="textarea"
            :rows="2"
            placeholder="温馨提示和注意事项"
          />
        </el-form-item>
        
        <!-- 图片选择 -->
        <el-form-item label="线路图片">
          <div class="image-selector-container">
            <ImageSelector 
              v-model="currentRoute.image" 
              @change="handleImageChange"
              placeholder="选择线路封面图片"
            />
            <div class="image-preview" v-if="currentRoute.image">
              <h4>当前图片预览：</h4>
              <img 
                :src="IMAGE_BASE_URL + currentRoute.image" 
                :alt="currentRoute.name"
                class="preview-image"
                @error="handleImageError"
              />
            </div>
          </div>
        </el-form-item>
        
        <!-- 行程编辑区域 -->
        <el-divider>行程安排</el-divider>
        <div class="schedule-editor">
          <div class="schedule-header">
            <span>根据游玩时长自动生成天数：</span>
            <el-button size="small" type="primary" @click="generateDays">生成天数</el-button>
            <el-button size="small" @click="addDay">添加一天</el-button>
          </div>
          
          <div v-if="currentRoute.days && currentRoute.days.length > 0" class="days-editor">
            <el-collapse v-model="activeDay" accordion>
              <el-collapse-item 
                v-for="(day, dayIndex) in currentRoute.days" 
                :key="dayIndex"
                :title="`第${day.dayNumber}天 (${day.activities?.length || 0}个活动)`"
                :name="dayIndex"
              >
                <div class="day-editor">
                  <div class="day-header">
                    <el-button size="small" type="primary" @click="addActivity(dayIndex)">添加活动</el-button>
                    <el-button size="small" type="danger" @click="removeDay(dayIndex)">删除这一天</el-button>
                  </div>
                  
                  <div v-if="day.activities && day.activities.length > 0" class="activities-editor">
                    <div 
                      v-for="(activity, activityIndex) in day.activities" 
                      :key="activityIndex"
                      class="activity-editor"
                    >
                      <el-card>
                        <div class="activity-form">
                          <el-row :gutter="10">
                            <el-col :span="6">
                              <el-select 
                                v-model="activity.timeType" 
                                placeholder="时间类型" 
                                size="small"
                                @change="onTimeTypeChange(activity)"
                              >
                                <el-option label="时间点" value="TIME_POINT" />
                                <el-option label="时间段" value="TIME_SLOT" />
                                <el-option label="全天" value="DAILY_SUMMARY" />
                              </el-select>
                            </el-col>
                            <el-col :span="6">
                              <!-- 时间点：显示时间输入框 -->
                              <el-time-picker
                                v-if="activity.timeType === 'TIME_POINT'"
                                v-model="activity.time"
                                placeholder="选择时间"
                                size="small"
                                format="HH:mm"
                                value-format="HH:mm"
                                :picker-options="{
                                  selectableRange: '06:00:00 - 23:59:59'
                                }"
                              />
                              <!-- 时间段：显示下拉选择 -->
                              <el-select
                                v-else-if="activity.timeType === 'TIME_SLOT'"
                                v-model="activity.time"
                                placeholder="选择时间段"
                                size="small"
                              >
                                <el-option label="早晨 (06:00-08:00)" value="早晨" />
                                <el-option label="上午 (08:00-12:00)" value="上午" />
                                <el-option label="中午 (12:00-14:00)" value="中午" />
                                <el-option label="下午 (14:00-18:00)" value="下午" />
                                <el-option label="傍晚 (18:00-20:00)" value="傍晚" />
                                <el-option label="晚上 (20:00-23:00)" value="晚上" />
                                <el-option label="深夜 (23:00-06:00)" value="深夜" />
                              </el-select>
                              <!-- 全天：显示固定文本 -->
                              <el-input
                                v-else
                                v-model="activity.time"
                                placeholder="全天"
                                size="small"
                                readonly
                                style="background-color: #f5f7fa;"
                              />
                            </el-col>
                            <el-col :span="8">
                              <el-input v-model="activity.title" placeholder="活动标题" size="small" />
                            </el-col>
                            <el-col :span="4">
                              <el-button size="small" type="danger" @click="removeActivity(dayIndex, activityIndex)">删除</el-button>
                            </el-col>
                          </el-row>
                          <el-row style="margin-top: 10px;">
                            <el-col :span="24">
                              <el-input 
                                v-model="activity.description" 
                                type="textarea" 
                                :rows="2" 
                                placeholder="活动描述" 
                                size="small"
                              />
                            </el-col>
                          </el-row>
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <div v-else class="no-activities">
                    <el-empty description="暂无活动安排" :image-size="60" />
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div v-else class="no-days">
            <el-empty description="暂无行程安排，请先生成天数" :image-size="80" />
          </div>
        </div>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="saveRoute">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Calendar, Edit, Delete, Picture } from '@element-plus/icons-vue'
import ImageSelector from '@/components/ImageSelector.vue'

const API_BASE_URL = 'http://localhost:8080/api'
const IMAGE_BASE_URL = 'http://localhost:8080/'

interface DayActivity {
  id?: number
  timeType: string
  time: string
  title: string
  description: string
}

interface RouteDay {
  dayNumber: number
  activities: DayActivity[]
}

interface TravelRoute {
  id?: number
  name: string
  description: string
  duration: string
  theme: string
  price: number
  transportation: string
  image: string
  tips: string
  features: string
  suitableFor: string
  days: RouteDay[]
}

const routes = ref<TravelRoute[]>([])
const filteredRoutes = ref<TravelRoute[]>([])
const searchKeyword = ref('')
const showDialog = ref(false)
const isEditing = ref(false)
const showScheduleDetailDialog = ref(false)
const selectedRoute = ref<TravelRoute | null>(null)
const activeDay = ref<number | null>(null)
const currentRoute = ref<TravelRoute>({
  name: '',
  description: '',
  duration: '',
  theme: '',
  price: 0,
  transportation: '',
  image: '',
  tips: '',
  features: '',
  suitableFor: '',
  days: []
})

const formRules = {
  name: [{ required: true, message: '请输入线路名称', trigger: 'blur' }],
  description: [{ required: true, message: '请输入线路描述', trigger: 'blur' }],
  duration: [{ required: true, message: '请选择游玩时长', trigger: 'change' }],
  theme: [{ required: true, message: '请选择线路主题', trigger: 'change' }]
}

const loadRoutes = async () => {
  try {
    const response = await fetch(`${API_BASE_URL}/travel-routes`)
    if (response.ok) {
      const data = await response.json()
      console.log('获取到的线路数据:', data)
      console.log('获取到的数据数量:', data.length)
      routes.value = data
      filteredRoutes.value = routes.value
      console.log('设置后的routes数量:', routes.value.length)
      console.log('设置后的filteredRoutes数量:', filteredRoutes.value.length)
    }
  } catch (error) {
    console.error('加载线路数据失败:', error)
    ElMessage.error('加载线路数据失败')
  }
}

const searchRoutes = () => {
  if (!searchKeyword.value.trim()) {
    filteredRoutes.value = routes.value
  } else {
    filteredRoutes.value = routes.value.filter(route =>
      route.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }
  console.log('搜索关键词:', searchKeyword.value)
  console.log('原始数据数量:', routes.value.length)
  console.log('搜索后的数据数量:', filteredRoutes.value.length)
  console.log('搜索后的数据:', filteredRoutes.value)
}

const truncateText = (text: string, maxLength: number) => {
  if (!text) return ''
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
}

const getThemeColor = (theme: string) => {
  const colorMap: { [key: string]: string } = {
    '历史文化': 'warning',
    '自然风光': 'success',
    '美食体验': 'danger',
    '休闲度假': 'info',
    '探险户外': 'primary',
    '亲子游': 'success'
  }
  return colorMap[theme] || 'info'
}

const showScheduleDialog = (route: TravelRoute) => {
  console.log('显示行程详情 - 选中路线:', route)
  console.log('显示行程详情 - 路线天数:', route.days)
  console.log('显示行程详情 - 天数长度:', route.days?.length)
  
  selectedRoute.value = route
  showScheduleDetailDialog.value = true
}

const getTimeTypeLabel = (timeType: string) => {
  switch (timeType) {
    case 'TIME_POINT': return '时间点'
    case 'TIME_SLOT': return '时间段'
    case 'DAILY_SUMMARY': return '全天'
    default: return timeType
  }
}

const getTimeTypeColor = (timeType: string) => {
  switch (timeType) {
    case 'TIME_POINT': return 'primary'
    case 'TIME_SLOT': return 'success'
    case 'DAILY_SUMMARY': return 'warning'
    default: return 'info'
  }
}

const addRoute = () => {
  // 重置表单数据
  currentRoute.value = {
    name: '',
    description: '',
    duration: '',
    theme: '',
    price: 0,
    transportation: '',
    image: '',
    tips: '',
    features: '',
    suitableFor: '',
    days: []
  }
  isEditing.value = false
  showDialog.value = true
}

const editRoute = (route: TravelRoute) => {
  console.log('编辑线路 - 原始数据:', route)
  
  // 深拷贝路线数据，确保所有字段都能正确回显
  currentRoute.value = {
    id: route.id,
    name: route.name || '',
    description: route.description || '',
    duration: route.duration || '',
    theme: route.theme || '',
    price: route.price || 0,
    transportation: route.transportation || '',
    image: route.image || '',
    tips: route.tips || '',
    features: route.features || '',
    suitableFor: route.suitableFor || '',
    days: route.days ? JSON.parse(JSON.stringify(route.days)) : []
  }
  
  console.log('编辑线路 - 处理后数据:', currentRoute.value)
  
  isEditing.value = true
  showDialog.value = true
}

const deleteRoute = async (id: number) => {
  try {
    await ElMessageBox.confirm('确定要删除这个线路吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    const response = await fetch(`${API_BASE_URL}/travel-routes/${id}`, {
      method: 'DELETE'
    })
    
    if (response.ok) {
      ElMessage.success('删除成功')
      loadRoutes()
    } else {
      ElMessage.error('删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除线路失败:', error)
      ElMessage.error('删除线路失败')
    }
  }
}

const saveRoute = async () => {
  if (!currentRoute.value.name || !currentRoute.value.description) {
    ElMessage.warning('请填写完整信息')
    return
  }

  console.log('保存线路 - 发送数据:', currentRoute.value)

  try {
    const url = isEditing.value 
      ? `${API_BASE_URL}/travel-routes/${currentRoute.value.id}`
      : `${API_BASE_URL}/travel-routes`
    
    const method = isEditing.value ? 'PUT' : 'POST'
    
    console.log('保存线路 - 请求信息:', { url, method })
    
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(currentRoute.value)
    })
    
    if (response.ok) {
      const responseData = await response.json()
      console.log('保存线路 - 响应数据:', responseData)
      ElMessage.success(isEditing.value ? '更新成功' : '添加成功')
      closeDialog()
      loadRoutes()
    } else {
      const errorText = await response.text()
      console.error('保存失败 - 错误响应:', errorText)
      ElMessage.error(isEditing.value ? '更新失败' : '添加失败')
    }
  } catch (error) {
    console.error('保存线路失败:', error)
    ElMessage.error('保存线路失败')
  }
}

const closeDialog = () => {
  showDialog.value = false
  isEditing.value = false
  activeDay.value = null
  currentRoute.value = {
    name: '',
    description: '',
    duration: '',
    theme: '',
    price: 0,
    transportation: '',
    image: '',
    tips: '',
    features: '',
    suitableFor: '',
    days: []
  }
}

// 行程编辑相关方法
const generateDays = () => {
  const duration = currentRoute.value.duration
  let dayCount = 1
  
  if (duration.includes('一日')) dayCount = 1
  else if (duration.includes('三日')) dayCount = 3
  else if (duration.includes('五日')) dayCount = 5
  else {
    ElMessage.warning('请选择有效的游玩时长（一日游、三日游、五日游）')
    return
  }
  
  console.log('生成天数 - 时长:', duration, '天数:', dayCount)
  
  currentRoute.value.days = []
  for (let i = 1; i <= dayCount; i++) {
    currentRoute.value.days.push({
      dayNumber: i,
      activities: []
    })
  }
  
  console.log('生成天数 - 结果:', currentRoute.value.days)
  
  ElMessage.success(`已生成${dayCount}天行程框架`)
}

const addDay = () => {
  const newDayNumber = currentRoute.value.days.length + 1
  currentRoute.value.days.push({
    dayNumber: newDayNumber,
    activities: []
  })
  ElMessage.success(`已添加第${newDayNumber}天`)
}

const removeDay = (dayIndex: number) => {
  if (currentRoute.value.days.length <= 1) {
    ElMessage.warning('至少需要保留一天行程')
    return
  }
  
  currentRoute.value.days.splice(dayIndex, 1)
  // 重新编号
  currentRoute.value.days.forEach((day, index) => {
    day.dayNumber = index + 1
  })
  ElMessage.success('已删除该天行程')
}

const addActivity = (dayIndex: number) => {
  const newActivity: DayActivity = {
    timeType: 'TIME_POINT',
    time: '09:00',
    title: '',
    description: ''
  }
  
  if (!currentRoute.value.days[dayIndex].activities) {
    currentRoute.value.days[dayIndex].activities = []
  }
  
  currentRoute.value.days[dayIndex].activities.push(newActivity)
  
  console.log(`添加活动 - 第${dayIndex + 1}天:`, currentRoute.value.days[dayIndex])
  
  ElMessage.success('已添加新活动')
}

// 添加时间类型变化处理方法
const onTimeTypeChange = (activity: DayActivity) => {
  // 根据时间类型设置默认时间
  switch (activity.timeType) {
    case 'TIME_POINT':
      activity.time = '09:00'
      break
    case 'TIME_SLOT':
      activity.time = '上午'
      break
    case 'DAILY_SUMMARY':
      activity.time = '全天'
      break
    default:
      activity.time = ''
  }
  console.log('时间类型变化:', activity.timeType, '设置时间为:', activity.time)
}

const removeActivity = (dayIndex: number, activityIndex: number) => {
  currentRoute.value.days[dayIndex].activities.splice(activityIndex, 1)
  ElMessage.success('已删除活动')
}

// 添加计算属性来处理表格数据
const tableData = computed(() => {
  const result = filteredRoutes.value.map(route => ({
    ...route,
    actualDays: route.days ? route.days.length : 0
  }))
  console.log('表格数据计算 - 输入数据数量:', filteredRoutes.value.length, '输出数据数量:', result.length)
  console.log('表格数据详情:', result)
  return result
})

const handleImageError = () => {
  // 处理图片加载失败后的逻辑
  console.warn('图片加载失败')
}

const handleImageChange = () => {
  // 处理图片变化后的逻辑
  console.log('图片变化')
}

onMounted(() => {
  loadRoutes()
})
</script>

<style scoped>
.route-manage {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
}

.search-bar {
  margin-bottom: 20px;
}

.schedule-content {
  max-height: 70vh;
  overflow-y: auto;
}

.route-info {
  margin-bottom: 20px;
}

.day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2c3e50;
}

.activities {
  space-y: 16px;
}

.activity-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.activity-item h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 16px;
}

.activity-item p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.tips-section {
  margin-top: 20px;
}

.no-schedule {
  text-align: center;
  padding: 40px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.schedule-editor {
  margin-top: 20px;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.days-editor {
  margin-top: 10px;
}

.day-editor {
  margin-bottom: 10px;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activities-editor {
  margin-top: 10px;
}

.activity-editor {
  margin-bottom: 10px;
}

.activity-form {
  padding: 10px;
}

.no-activities {
  text-align: center;
  padding: 40px;
}

.no-days {
  text-align: center;
  padding: 40px;
}

/* 时间类型相关样式 */
.activity-form .el-select {
  width: 100%;
}

.activity-form .el-time-picker {
  width: 100%;
}

.activity-form .el-input {
  width: 100%;
}

/* 全天时间输入框的特殊样式 */
.activity-form .el-input.is-readonly {
  background-color: #f5f7fa;
  color: #909399;
}

.route-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.route-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image-icon {
  color: #909399;
}

.image-selector-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.image-preview {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.image-preview h4 {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 14px;
}

.preview-image {
  max-width: 300px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.route-image-section {
  margin-bottom: 20px;
  text-align: center;
}

.route-detail-image {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 4px;
}
</style> 